/**
 * @file webpack配置
 * @author lvjiran
 * @data 2021-06-19
 * @version v.1.0
 */

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const utilConfig = require('./config/utilConfig.js');

const resolve = dir => {
    return path.join(__dirname, dir);
};

module.exports = {
    publicPath: './',
    // 放置打包生成的静态资源的目录
    assetsDir: 'assets',
    // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
    lintOnSave: process.env.NODE_ENV !== 'production',
    // webpack 配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置
            config.mode = 'production';

            const optimization = {
                runtimeChunk: 'single',
                // 优化打包chunk-vendors.js文件体积过大, 将每个依赖包打包成单独的js文件
                splitChunks: {
                    chunks: 'all',
                    cacheGroups: {
                        libs: {
                            name: 'chunk-libs',
                            test: /[\\/]node_modules[\\/]/,
                            priority: 10,
                            chunks: 'initial'
                        },
                        commons: {
                            name: 'chunk-commons',
                            test: resolve('src/components'),
                            minChunks: 3,
                            priority: 5,
                            reuseExistingChunk: true
                        }
                    }
                },
                // 打包时去除打印信息
                minimizer: [
                    new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: true,
                                drop_debugger: true
                            },
                            keep_fnames: true,
                            mangle: {
                                safari10: true
                            }
                        },
                        parallel: true
                    })
                ]
            };

            Object.assign(config, {
                optimization
            });

            const plugins = [];
            // 添加插件
            plugins.push(
                // 开启gzip压缩
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(js|css)$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );
            config.plugins = [...config.plugins, ...plugins];
        } else {
            // 为开发环境修改配置
            config.mode = 'development';
        }
    },
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
            .set('views', resolve('src/views'))
            .set('router', resolve('src/router'))
            .set('store', resolve('src/store'));
    },
    css: {
        // css预设器配置项
        loaderOptions: {
            less: {
                // 引入全局变量样式
                // additionalData: `@import "~@/assets/css/xxx.less";`
            }
        }
    },
    devServer: {
        // 端口
        port: 8080,
        // 自动开启浏览器
        open: true,
        // 代码保存时自动刷新页面
        inline: true,
        // 所有服务启用 gzip 压缩
        compress: true,
        // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
        overlay: {
            warnings: true,
            errors: true
        },
        // 设置API访问代理
        proxy: utilConfig.setProxy()
    }
};
